<template>
    <el-dialog
        :close-on-click-modal="false"
        title="最近事件"
        class="re-dialog tip-dialog"
        :class="{'show-box':!!activeId}"
        :visible.sync="dialogVisible"
        height="400px"
        width="400px"
    >
        <div class="tip-content">
            <div class="search-box">
                <el-input
                    class="search-input"
                    :class="{'search-hide':searchValue.length>0}"
                    size="small"
                    placeholder="搜索"
                    prefix-icon="el-icon-search"
                    v-model="searchValue"
                    readonly
                    @keyup.enter.native="search"
                ></el-input>
                <!-- <span><img src="../../assets/8512345/search.png" class="search-icon" alt>搜索</span> -->
            </div>
            <div class="search-item">
                <el-date-picker
                    v-model="request.startTime"
                    type="date"
                    size="small"
                    placeholder="时间"
                    @change="search"
                    value-format="yyyy-MM-dd"
                ></el-date-picker>
                <el-input
                    size="small"
                    placeholder="标题"
                    type="text"
                    :maxlength="30"
                    v-model="request.keyword"
                    @keyup.enter.native="search"
                />
            </div>
            <ul class="sj-list" id="zjsjList">
                <li v-for="(item,index) in sjList" :key="index" @click="clickzjsjList(item)">
                    <div class="tag">{{item.eventNumber}}</div>
                    <div class="list">
                        <span>时间：</span>
                        <span>{{item.newCreateTime}}</span>
                    </div>
                    <div class="list">
                        <span>类别：</span>
                        <span>{{codeToTitle('eventType',item.eventType)}}</span>
                    </div>
                    <div class="list">
                        <span>描述：</span>
                        <span>{{item.eventDesc}}</span>
                    </div>
                </li>
                <div v-if="!sjList.length" class="no-data">
                    <img src="../../assets/no-data.png" alt />
                </div>
            </ul>
            <div class="roll-more" v-if="sjList.length&&isMore">
                <div>
                    <div>向下滚动加载更多……</div>
                    <i :class="scrollFlag?'el-icon-loading':'el-icon-arrow-down'"></i>
                </div>
                <!-- <i class="el-icon-loading"></i> -->
            </div>
        </div>
        <div v-if="!!activeId" class="msg-detail create-detail">
            <div class="title-row">来电标记</div>
            <div class="create-content">
                <div class="call-box">
                    <div>
                        <div>
                            来电号码：
                            <span>{{parentItem.telOtherNum}}</span>
                        </div>
                        <div>
                            本机号码：
                            <span>{{parentItem.telMyNum}}</span>
                        </div>
                    </div>
                    <div>
                        <div>
                            来电单位：
                            <span>{{parentItem.contacts}}</span>
                        </div>
                    </div>
                </div>
                <i class="border-b" />
                <div class="audio-row">
                    <audio
                        v-if="parentItem.filePath"
                        controls
                        controlslist="nodownload"
                        preload="meta"
                    >
                        <source :src="parentItem.filePath" type="audio/mpeg" />
                    </audio>
                    <div v-else style="font-size:12px;color:#aaa">暂无录音</div>
                </div>
                <i class="border-b" />
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
                    <el-row v-for="(item,index) in formConfig" :key="index">
                        <el-col :span="20">
                            <el-form-item :label="item.label" :prop="item.code">
                                <el-input
                                    v-if="item.type == 'input'"
                                    :placeholder="item.placeholder"
                                    type="text"
                                    :maxlength="item.maxlength||100"
                                    v-model="ruleForm[item.code]"
                                />
                                <el-input
                                    v-if="item.type == 'textarea'"
                                    type="textarea"
                                    style="resize:none"
                                    :placeholder="item.placeholder"
                                    v-model="ruleForm[item.code]"
                                    :maxlength="item.maxlength"
                                    show-word-limit
                                />
                                <el-select
                                    class="w-100"
                                    v-else-if="item.type === 'select'"
                                    v-model="ruleForm[item.code]"
                                    :placeholder="item.placeholder"
                                >
                                    <el-option
                                        v-for="(sItem,sIndex) in item.data"
                                        :key="sIndex"
                                        :label="sItem.dictDataName"
                                        :value="sItem.dictDataCode"
                                    ></el-option>
                                </el-select>
                                <el-date-picker
									class="w-100"
                                    v-else-if="item.type === 'datePicker'"
                                    v-model="ruleForm[item.code]"
                                    type="date"
                                    size="small"
                                    :placeholder="item.placeholder"
                                    value-format="yyyy-MM-dd"
                                ></el-date-picker>
                                <span
                                    style="color:#1a36a9"
                                    v-if="item.type == 'span'"
                                >{{ruleForm[item.code]||item.value}}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <button class="footer-btn cancel" @click="cancelCreate">取 消</button>
                <button @click="onSubmit('ruleForm')" class="footer-btn sure">确定</button>
            </span>
        </div>
    </el-dialog>
</template>

<script>
import Pubsub from "../../utils/pubsub";
import {
    ZHZXEventInfoQueryRecent,
    findByDictCode,
    departmentGetDepartment,
    ZHZXEventInfoAdd,
    ZHZXEventInfoEventNumberCanUse
} from "../../config/api";
import { getTimeStr, addScrollEvent } from "../../utils";
export default {
    props: ["list", "total"],
    data() {
        var validateEventNumber = (rule, eventNumber, callback) => {
            if (!eventNumber) {
                return callback(new Error("工单号不能为空"));
            }
            setTimeout(() => {
                if (!/^[0-9]\d*$/.test(eventNumber)) {
                    callback(new Error("请输入数字"));
                } else {
                    this.hasEventNumber({eventNumber}, data => {
                        if (data) {
                            callback();
                        } else {
                            return callback(new Error("工单号已存在"));
                        }
                    });
                }
            }, 800);
        };
        return {
            dialogVisible: false,
            activeId: "-1", //当前显示的box，1代表快捷短信，2代表创建事件
            keyword: "",
            formConfig: [
                {
                    label: "工单号：",
                    type: "input",
                    placeholder: "请输入工单号",
                    code: "eventNumber",
                    maxlength: 50
                },
                {
                    label: "事件标题：",
                    type: "input",
                    placeholder: "请输入事件标题",
                    code: "eventTitle",
                    maxlength: 30
                },
                {
                    label: "事件类别：",
                    type: "select",
                    placeholder: "请选择事件类别",
                    code: "eventType",
                    data: []
                },
                {
                    label: "事件描述：",
                    type: "textarea",
                    placeholder: "请输入事件描述",
                    code: "eventDesc",
                    maxlength: 300
                },
                {
                    label: "事件关键词：",
                    type: "input",
                    placeholder: "请输入事件关键字",
                    code: "eventKeyword",
                    maxlength: 100
                },
                {
                    label: "处理单位：",
                    type: "select",
                    placeholder: "请选择处理单位",
                    code: "disposalUnitCode",
                    data: []
                },
                {
                    label: "事件来源：",
                    type: "select",
                    placeholder: "请选择来源",
                    code: "eventSourceCode",
                    data: []
                },
                {
                    label: "本级到期时间：",
                    type: "datePicker",
                    placeholder: "请选择时间",
                    code: "myLimitTime"
                },
                {
                    label: "市级到期时间：",
                    type: "datePicker",
                    placeholder: "请选择时间",
                    code: "highLimitTime"
                }
                // {
                //   label: "事件上报人：",
                //   type: "span",
                //   placeholder: "请输入上报人",
                //   code: "reporterName",
                //   value:'未知'
                // },
                // {
                //   label: "电话号码：",
                //   type: "span",
                //   placeholder: "请输入号码",
                //   code: "telNo",
                //   value:''
                // },
            ],
            ruleForm: {
                eventNumber: "",
                eventTitle: "",
                eventType: "",
                eventDesc: "",
                eventKeyword: "",
                disposalUnitCode: "",
                eventSourceCode: "",
                telNo: "",
                reporterName: "",
                telId: "",
                myLimitTime: "",
                highLimitTime: "",
            },
            rules: {
                eventNumber: [
                    {
                        required: true,
                        message: "请输入工单号",
                        trigger: "change"
                    },
                    { validator: validateEventNumber, trigger: "change" }
                ],
                eventTitle: [
                    {
                        required: true,
                        message: "请输入事件标题",
                        trigger: "change"
                    }
                ],
                eventType: [
                    {
                        required: true,
                        message: "请选择事件类别",
                        trigger: "change"
                    }
                ],
                eventDesc: [
                    {
                        required: true,
                        message: "请输入事件描述",
                        trigger: "change"
                    }
                ],
                eventKeyword: [
                    {
                        required: true,
                        message: "请输入事件关键字",
                        trigger: "change"
                    }
                ],
                disposalUnitCode: [
                    {
                        required: true,
                        message: "请选择处理单位",
                        trigger: "change"
                    }
                ],
                eventSourceCode: [
                    {
                        required: true,
                        message: "请选择来源",
                        trigger: "change"
                    }
                ],
                myLimitTime: [
                    {
                        required: true,
                        message: "请选择时间",
                        trigger: "change"
                    }
                ],
                highLimitTime: [
                    {
                        required: true,
                        message: "请选择时间",
                        trigger: "change"
                    }
                ],
            },
            searchValue: "",
            keyword: "",
            sjList: [],
            scrollFlag: false, //是否滚动到底部，
            isMore: true, //是否最后一页
            totalPage: 1, //总页数
            request: {
                pageNum: 1,
                pageSize: 10,
                startTime: "",
                // endTime: "",
                keyword: ""
            },
            parentItem: {} //父级传过来的数据
        };
    },
    
    created() {
        this.pubsub_token = Pubsub.subscribe("bjDialog", (type, values) => {
            let { item = {} } = values;
            this.parentItem = item;
            console.log("消息列表数据：", item);
            this.getSjList();
            this.activeId = "-1"; //重置
            setTimeout(() => {
                addScrollEvent("zjsjList", this.handleScroll);
                this.$refs.ruleForm.clearValidate(); //重置
            }, 0);
            this.ruleForm.eventNumber = item.eventNumber || "";
            this.ruleForm.telNo = item.telOtherNum || "";
            this.ruleForm.reporterName = item.contacts || "";
            this.ruleForm.telId = item.id || ""; //赋值,
            this.ruleForm.myLimitTime=item.myLimitTime?getTimeStr(item.myLimitTime):'',
            this.ruleForm.highLimitTime=item.highLimitTime?getTimeStr(item.highLimitTime):'',
            this.getDictCode();
            this.dialogVisible = true;
        });
    },
    destroyed() {
        this.pubsub_token && Pubsub.unsubscribe(this.pubsub_token);
    },
    methods: {
        /**
         * 取消创建
         */
        cancelCreate() {
            this.dialogVisible = false;
        },
        /**
         * onSubmit提交
         */
        onSubmit(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    ZHZXEventInfoAdd(this.ruleForm).then(res => {
                        this.$message({
                            message: "新增成功",
                            type: "success"
                        });
                        this.$emit("callback");
                        this.dialogVisible = false;
                    });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        reset() {
            this.keyword = "";
        },
        search(e) {
            this.getSjList();
        },
        getSjList(isMore) {
            const { sjList, request } = this;
            ZHZXEventInfoQueryRecent(request).then((res = {}) => {
                this.scrollFlag = false;
                if (res.rows && res.rows.length) {
                    res.rows.map(item => {
                        item.newCreateTime =
                            getTimeStr(item.createTime, "yyyy-MM-dd") || "";
                    });
                }
                this.sjList = isMore ? sjList.concat(res.rows) : res.rows;
                this.totalPage = Math.ceil(res.total / request.pageSize) || 1;
            });
        },
        /**
         * 判断工单号是否存在
         */
        hasEventNumber(res, cb) {
            res.id=this.parentItem.id||'';
            ZHZXEventInfoEventNumberCanUse(res).then((res = {}) => {
                cb(res.data);
            });
        },
        handleScroll: function(h1, h2) {
            if (this.scrollFlag) {
                return;
            }
            if (h1 > h2) {
                let { pageNum } = this.request;
                if (pageNum < this.totalPage) {
                    ++this.request.pageNum;
                    this.scrollFlag = true;
                    this.getSjList(true);
                } else {
                    this.isMore = false;
                }
            }
        },
        /**
         * 获取数据字典--取件类型
         */
        getDictCode() {
            findByDictCode({ dictCode: "eventType" }).then((res = {}) => {
                this.formConfig.find(item => item.code == "eventType").data =
                    res.data || [];
            });
             findByDictCode({ dictCode: "eventSourceCode" }).then((res = {}) => {
                this.formConfig.find(item => item.code == "eventSourceCode").data =
                    res.data || [];
            });
            departmentGetDepartment({}).then((res = {}) => {
                let { data } = res;
                if (data && data.length) {
                    data.map((item, index) => {
                        item.dictDataName = item.name;
                        item.dictDataCode = item.id;
                    });
                    this.formConfig.find(
                        item => item.code == "disposalUnitCode"
                    ).data = data || [];
                }
            });
        },
        clickzjsjList(item) {
            if (this.activeId == item.id) {
                this.activeId = "";
                this.$refs.ruleForm.clearValidate();
            } else {
                this.activeId = item.id;
                this.ruleForm = {
                    eventNumber: item.eventNumber,
                    eventTitle: item.eventTitle,
                    eventType: item.eventType,
                    eventDesc: item.eventDesc,
                    eventKeyword: item.eventKeyword,
                    disposalUnitCode: item.disposalUnitCode,
                    eventSourceCode: item.eventSourceCode,
                    myLimitTime: item.myLimitTime,
                    highLimitTime: item.highLimitTime,
                    telNo: item.telNo || "",
                    reporterName: item.reporterName || "",
                    telId: item.telId || ""
                };
            }
        },
        codeToTitle(type, code) {
            //获取对应数据字典的值
            let dataList =
                this.formConfig.find(item => item.code == type).data || [];
            return (dataList.find(item => item.dictDataCode == code) || {})
                .dictDataName;
        }
    }
};
</script>

<style lang = "scss" scoped>
@import "../../css/unifyAcceptWorkbench.scss";
.tip-dialog {
    /* position: relative; */
    /* left:30%; */
    transition: all 0.3s ease-in-out;
}
.show-box {
    left: -70vmin;
}
.w-100 {
    width: 100%;
}
.tip-content {
    text-align: center;
    box-sizing: border-box;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.come-tel {
    font-size: 40px;
    color: #1a36a9;
}
.come-name {
    font-size: 30px;
    color: #1a36a9;
}
.msg-detail {
    position: absolute;
    left: 100%;
    margin-left: 15px;
    background: #fff;
    top: 0px;
    width: 80vmin;
    height: 300px;
    border-radius: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    z-index: 9999;
    &:before {
        content: "";
        display: block;
        position: absolute;
        display: block;
        margin-top: -12px;
        top: 50%;
        left: -16px;
        height: 0;
        width: 0;
        border-top: 24px solid transparent;
        border-bottom: 24px solid transparent;
        border-right: 28px solid #fff;
        /* box-shadow: 0.5px 0.9px 2px 0px rgba(153, 153, 153, 0.48); */
        z-index: 9;
    }
}
.create-detail {
    width: 450px;
    height: auto;
    /* top: -40px; */
}
.create-content {
    background: #fff;
    /* padding: 25px 0 0 0; */
}
.title-row {
    height: 34px;
    line-height: 34px;
    background: #1a36a9;
    color: #fff;
    padding-left: 15px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.msg-content {
    display: flex;
    height: 100%;
    .left-content {
        width: 50%;
        border-right: 1px solid #eee;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        height: 100%;
        padding-bottom: 15px;
        /* padding:0 15px; */
    }
    .right-content {
        width: 50%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }
    .msg-title-row {
        padding: 20px 15px;
        color: #1a36a9;
        span {
            display: block;
            padding-left: 10px;
            border-left: 2px solid #1a36a9;
            height: 14px;
            line-height: 14px;
        }
        &.line {
            border-bottom: 1px solid #eee;
        }
    }
    .search-row {
        display: flex;
        position: relative;
        margin-bottom: 25px;
        padding: 0 20px;
        .reset-btn {
            position: absolute;
            background: #fff;
            top: 9px;
            right: 62px;
            &:active {
                opacity: 1;
            }
        }
    }
    .search-btn {
        background: #fff;
        padding: 0 10px;
        position: absolute;
        right: 22px;
        top: 7px;
        &:active {
            opacity: 1;
        }
        img {
            height: 20px;
            width: 20px;
        }
    }
    .kn-ul {
        padding: 0 15px;
        flex: 1;
        overflow: auto;
        li {
            padding: 0 15px;
            &.active {
                background: #edf1ff;
            }
            .kn-list {
                .target {
                    height: 20px;
                    width: 20px;
                    background: #1a36a9;
                    border-radius: 3px;
                    color: #fff;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-right: 20px;
                }
                display: flex;
                padding: 10px 0;
                border-bottom: 1px solid #eee;
            }
        }
    }
    .reply-content {
        padding: 20px 20px 10px 20px;
        flex: 1;
        overflow: auto;
    }
    .reply-handle-row {
        display: flex;
        padding: 10px 10px 10px 0;
        .reply-tel {
            flex: 1;
            margin-right: 10px;
            background: #f3f3f3;
            color: #1a36a9;
            font-size: 20px;
            line-height: 5vmin;
            padding-left: 20px;
        }
        button {
            background: #1a36a9;
            width: 9vmin;
            height: 5vmin;
            color: #fff;
        }
    }
}
.footer-btn {
    width: 66px;
    height: 32px;
    border-radius: 3px;
    &:active {
        opacity: 0.8;
    }
}
.sure {
    background-color: #1a36a9;
    color: #fff;
}
.cancel {
    background-color: #d2d2d2;
    margin-right: 40px;
}
.dialog-footer {
    display: flex;
    padding: 20px 0;
    margin-top: 0;
    justify-content: center;
    border-top: 1px solid #eee;
}
.audio-row {
    margin: 0 25px;
    padding-top: 10px;
}
audio {
    height: 20px;
    width: 100%;
}
.call-box {
    padding: 10px 20px;
    margin: 10px 25px;
    background: #fffde2;
    border-radius: 8px;
    font-size: 12px;
    > div {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        line-height: 2;
        span {
            color: #1a36a9;
        }
    }
}
.border-b {
    display: block;
    border-bottom: 1px solid #d2d2d2;
    opacity: 0.5;
    margin: 10px 0;
}
.search-box {
    position: relative;
    padding-bottom: 15px;
    > span {
        position: absolute;
        width: 50px;
        left: 0;
        img {
            display: inline;
            vertical-align: bottom;
        }
    }
}
.search-item {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    margin-bottom: 20px;
    > * {
        width: 170px;
    }
}
.sj-list {
    overflow-y: auto;
    height: 440px;
    border-top: 1px solid #eee;
    li {
        display: flex;
        border-top: 2px solid #a8c6fa;
        flex-direction: column;
        text-align: left;
        font-size: 12px;
        cursor: pointer;
        .tag {
            height: 28px;
            background-color: #e5e5e5;
            position: relative;
            padding-left: 10px;
            width: 115px;
            line-height: 28px;
            &::after {
                content: "";
                width: 0;
                height: 0;
                border-top: 28px solid #e5e5e5;
                border-right: 28px solid transparent;
                position: absolute;
                right: -28px;
                top: 0;
                z-index: -1;
            }
        }
        .list {
            margin: 10px 20px;
            span {
                color: #000;
                &:first-child {
                    color: #999;
                }
            }
        }
    }
}
.roll-more {
    border-top: 1px solid #e5e5e5;
    padding: 20px 20px 5px;
    color: #a2a2a2;
    /* cursor: pointer; */
    i {
        font-size: 22px;
    }
}
</style>
<style>
.re-dialog .el-dialog__body {
    /* padding: 0; */
}
.search-input input {
    text-align: center;
    padding-left: 15px;
    background-color: #f2f2f2;
}
.search-item input {
    text-align: center;
}
/* .search-item input::-webkit-input-placeholder {
  color: #666;
}
.search-item input::-moz-placeholder {
  color: #666;
}
.search-item input::-ms-input-placeholder {
  color: #666;
} */
.search-input .el-input__prefix {
    left: 170px;
}
.search-hide .el-input__prefix {
    display: none;
}
</style>
